<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        header {
            width: 100%;
            height: 130px;
            box-sizing: border-box;
            padding: 4px 10px;
        }

        header .banner {
            width: 100%;
            height: 100%;
        }

        section {
            position: relative;
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 0 8px;
        }

        .content {
            width: 100%;
            height: 100%;
        }

        .ware {
            position: relative;
            width: 100%;
            height: 145px;
            box-sizing: border-box;
            padding-top: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #d1d1d1;
        }

        .ware .thumbnail {
            position: absolute;
            top: 20px;
            left: 0px;
            height: 100px;
            width: 100px;
        }

        .ware .info {
            width: 100%;
            height: 114px;
            box-sizing: border-box;
            padding-left: 112px;
            padding-right: 28px;
        }

        .ware .info .name {
            width: 100%;
            height: 15px;
            color: #555555;
            margin-top: 14px;
            font-size: 15px;
        }

        .ware .info .description {
            margin-top: 10px;
            width: 100%;
            height: 13px;
            font-size: 13px;
            color: #9d9d9d;
        }

        .ware .info .price-tag {
            margin-top: 10px;
            width: 100%;
            height: 12px;
            font-size: 12px;
            vertical-align: top;
        }

        .ware .info .price-tag .price {
            color: #e3007f;
        }

        .ware .info .price-tag .unit {
            font-size: 8px;
            color: #cbcbcb;
        }

        .ware .info .origin-price {
            margin-top: 5px;
            width: 100%;
            height: 10px;
            font-size: 10px;
            color: #d3d3d3;
        }

        .ware .control {
            position: absolute;
            width: 110px;
            height: 23px;
            right: 8px;
            top: 90px;
        }

        .ware .control .add {
            position: absolute;
            top: 0;
            right: 0;
            width: 23px;
            height: 23px;
            z-index: 2;
        }

        .push-status {
            width: 100%;
            height: 40px;
            font-size: 16px;
            color: #888;
            line-height: 40px;
            text-align: center;
            background-color: #fff;
        }

        .active {
            opacity: 0.7;
        }
    </style>
    <script src="../script/doT.min.js" charset="utf-8"></script>
</head>

<body>
    <header id="header">
        <img src="../image/default_rect.png" alt="" class="banner" id="banner">
    </header>
    <section id="list">
        <div class="ware">
            <div class="content">
                <img src="../image/default_square.png" alt="" class="thumbnail">
                <div class="info">
                    <div class="name">name</div>
                    <div class="description">description</div>
                    <div class="price-tag">
                        <span class="price">￥100</span>
                        <span class="unit">/kg</span>
                    </div>
                    <div class="origin-price">
                        <del>超市：￥110</del>
                    </div>
                    <div class="control">
                        <img src="../image/add.png" alt="" class="add">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="push-status" id="pushStatus">上拉显示更多</div>
</body>
<script type="text/template" id="wareTemplate">
    {{~ it:ware:index}}
    <div class="ware">
        <div class="content" tapmode onclick="fnOpenWareWin();">
            <img onload="fnLoadImage(this)" data-url="{{= ware.thumbnail.url}}" src="../image/default_rect.png" class="thumbnail">
            <div class="info">
                <div class="name">{{= ware.name}}</div>
                <div class="description">{{= ware.description}}</div>
                <div class="price-tag">
                    <span class="price">￥{{= ware.price}}</span>
                    <span class="unit">/{{= ware.unit}}</span>
                </div>
                <div class="origin-price">
                    <del>超市：￥{{= ware.originPrice}}</del>
                </div>
                <div class="control">
                    <img src="../image/add.png" alt="" class="add">
                </div>
            </div>
        </div>
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        //fnLoadWares(); //加载指定分类下的商品数据

        init();
        initEventListener();
        fnGetWareList();

        // 下拉刷新
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#fff',
            textColor: '#e1017e',
            showTime: true
        }, function(ret, err) {
            fnLoadWares();
        });

        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 300
            }
        }, function(ret, err) {
            fnLoadWares(true);
        });

    };

    var currentCity, wareTypeList;
    function init() {
      currentCity = $api.getStorage('currentCity');
      wareTypeList = $api.getStorage('wareTypeList');
    }

    // 上拉加载更多
    function initEventListener() {
      api.addEventListener({
          name: 'cityChange'
      }, function(ret, err){
          if( ret ){
              //  alert( JSON.stringify( ret ) );
            if(ret.value){
              // var currentCity = ret.value.currentCity.id;
              fnGetWareList(ret.value.currentCity.id);
            }
          }else{
               alert( JSON.stringify( err ) );
          }
      });

    }

    //加载商品
    var skip = 0;
    var limit = 5;
    function fnLoadWares(more) {
        if (more) {
            skip += limit;
        } else {
            skip = 0;
        }
        var params = {
            fields: {},
            where: {
                supportAreaId: "56c80e0c789b068408ab5a6f",
                wareTypeId: api.pageParam.wareTypeId
            },
            skip: skip,
            limit: limit
        };

        api.ajax({
            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
            method: 'get',
            headers: {
                "X-APICloud-AppId": "A6921544633372",
                "X-APICloud-AppKey": "2672b5911d8551540c1ea598e01c87fee217a1e5.1482500122476"
            }
        }, function(ret, err) {
            if (ret) {
                var strTemplate = $api.html($api.byId('wareTemplate'));
                var fnTemplate = doT.template(strTemplate);
                strTemplate = fnTemplate(ret);
                var list = $api.byId('list');
                if (more) {
                    $api.append(list, strTemplate);
                } else {
                    $api.html(list, strTemplate);
                }
                api.refreshHeaderLoadDone();
            } else {
                alert(JSON.stringify(err));
            }
        });

    }

    // 先将网络请求的图片存入缓存
    function fnLoadImage(ele_) {
        var dataUrl = $api.attr(ele_, 'data-url');
        if (dataUrl) {
            api.imageCache({
                url: dataUrl
            }, function(ret, err) {
                if (ret) {
                    ele_.src = ret.url;
                }
            });
        }

    }

    //打开商品详情窗口
    function fnOpenWareWin() {
        api.openWin({
            name: 'ware',
            url: './ware.html',
            pageParam: {
                wareId: 'w123456'
            }
        });

    }

    //加载商品列表
    function fnGetWareList(currentCityId_) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var params = {
            fields: {},
            where: {
                supportAreaId: currentCityId_,
                wareTypeId: wareTypeList[api.pageParam.wareTypeIndex].id
            },
            skip: 0,
            limit: 5
        }
        params = $api.jsonToStr(params);
        api.ajax({
            url: 'http://d.apicloud.com/mcm/api/ware?filter=' + params,
            method: 'get',
            headers: {
                "X-APICloud-AppId": "A6914327011091",
                "X-APICloud-AppKey": "8ac17d22e49cb7982d82796097cec52a6c7cd01d.1475375422841"
            }
        }, function(ret, err) {
            if(ret){
              api.hideProgress();
              fnUpdateWareList(ret);
            }else{
              console.log($api.jsonToStr(ret));
            }
            // console.log(JSON.stringify(ret));
        });
    }

    function fnUpdateWareList(data_) {
      var list = $api.byId('list');
      var tempFn = doT.template($api.byId('wareTemplate').innerHTML);
      var resultText = tempFn(data_);
      $api.html(list, resultText);

    }
</script>

</html>
